<link rel="ractive" href="../shared/header.html" name="Header">
<link rel="ractive" href="./sidebar.html" name="FreeOpenSourceCdnSidebar">

<Header app="{{app}}" query="{{query}}"></Header>
<FreeOpenSourceCdnSidebar></FreeOpenSourceCdnSidebar>

<div class="wordpress-cdn free-open-source-cdn">
	<div class="container">
		<div class="row">
			<div class="col-md-14 col-md-offset-6 col-sm-18 col-sm-offset-5 col-xs-16 col-xs-offset-7">
				<div class="category">
					Free Open Source CDN
				</div>

				<h1>WordPress CDN</h1>
			</div>
		</div>
	</div>

	<div class="container">
		<div class="row">
			<div class="col-md-12 col-md-offset-6 col-sm-16 col-sm-offset-5 col-xs-20 col-xs-offset-2">
				TODO...
				<input type="text" id="wp-search-input" class="form-control">
			</div>
		</div>
	</div>
</div>

<script>
	component.exports = {
		onrender: function () {
			if (!Ractive.isServer) {
				var client = algoliasearch('latency', 'f394cda609ddd0db79743b7c5182af09', { protocol: 'https:' }).initIndex('wordpress_plugins');

				$('#wp-search-input').typeahead(null, {
					displayKey: 'name',
					source: function (query, syncResults, asyncResults) {
						client.search(query).then(function (result) {
							asyncResults(result.hits);
						}, { hitsPerPage: 10 });
					},
				});
			}
		}
	};
</script>
